<template>
  <div>
    <el-badge value="1.1k" class="item">
      <el-button size="small">评论</el-button>
    </el-badge>
    <el-badge :value="100" :max="10" class="item">
      <el-button size="small">回复</el-button>
    </el-badge>
    <el-badge is-dot class="item">数据查询</el-badge>
    <el-badge is-dot class="item">
      <el-button class="share-button" icon="el-icon-share" type="primary"></el-button>
    </el-badge>

    <div class="table-block" style="width: 500px;float: right;">
    <template>
      <el-table
        :data="tableData2"
        style="width: 100%"
        :row-class-name="tableRowClassName">
        <el-table-column
          prop="date"
          label="日期"
          width="180">
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          width="180">
        </el-table-column>
        <el-table-column
          prop="address"
          label="地址">
        </el-table-column>
      </el-table>
    </template>
    </div>

    <div class="table-block" style="width: 500px;">
      <template >
        <el-form label-position="left" inline class="demo-table-expand" label-width="80px">
          <el-form-item label="标题" style="width: 100%">
            <span >{{ shop.name }}</span>
          </el-form-item>
          <el-form-item label="内容" style="width: 100%">
              <span>第1：{{ shop.shop }}</span><br>
              <span>第2：{{ shop.id }}</span><br>
          </el-form-item>
          <el-form-item label="商品描述" style="width: 100%">
            <span>{{ shop.desc }}</span>
          </el-form-item>
        </el-form>
      </template>
    </div>

    <div class="table-block" style="width: 500px;">
      <template >
        <el-form label-position="left" inline class="demo-table-expand" label-width="80px">
          <el-form-item label="标题" style="width: 100%">
            <span >{{ shop.name }}</span>
          </el-form-item>
          <el-form-item label="内容" style="width: 100%">
            <span>第1：{{ shop.shop }}</span><br>
            <span>第2：{{ shop.id }}</span><br>
          </el-form-item>
          <el-form-item label="商品描述" style="width: 100%">
            <span>{{ shop.desc }}</span>
          </el-form-item>
          <el-form-item label="">
            评论：这个非常棒啊 ，<el-button type="text">回复</el-button>
            <el-input placeholder="评论" v-model="input5" class="input-with-select" style="margin-bottom: 5px;">
              <el-button slot="append" icon="klbicon-paperplane-fill"></el-button>
            </el-input>
          </el-form-item>
        </el-form>
      </template>
    </div>

    <div class="table-block" style="width: 500px;">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="问/答">
          <el-input placeholder="标题" v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="">
          <el-input placeholder="第一" v-model="input5" class="input-with-select" style="margin-bottom: 5px;">
            <el-button slot="append" icon="el-icon-edit"></el-button>
          </el-input>
          <el-input placeholder="第二" v-model="input5" class="input-with-select" style="margin-bottom: 5px;">
            <el-button slot="append" icon="el-icon-edit"></el-button>
          </el-input>
        </el-form-item>
        <el-form-item label="情况">
          <el-input type="textarea" v-model="form.desc"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">提交</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>

    </div>
  </div>
</template>

<style>
  .item {
    margin-top: 10px;
    margin-right: 40px;
  }

   .el-table .warning-row {
     background: oldlace;
   }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>
<script>
  export default {
    data() {
      return {
        form: {
          name: '',
          desc: ''
        },
        shop:{
        id : '12987122',
        name : '好滋好味鸡蛋仔',
        desc : '荷兰优质淡奶，奶香浓而不腻',
        shop : '王小虎夫妻店'
        },
        tableData2: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }]
      }
    },
    methods: {
      onSubmit() {
        console.log('submit!');
      },
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      }
    }
  }
</script>
